<!--
 * @Author: your name
 * @Date: 2022-03-25 11:39:22
 * @LastEditTime: 2024-02-07 09:58:54
 * @LastEditors: your name
 * @Description: 小草AI问答
-->
<template>
  <div class="chat-container" :class="getFontSize">
    <div class="chat-content" ref="scrollRef">
      <div class="content-card" v-for="(item, index) in dataList" :key="index" :class="{ 'card-content-2': item.isMe }">
        <!-- 左侧用户头像 -->
        <div class="card-left">
          <div class="card-image" v-if="!item.isMe">
            <img src="@/assets/favicon-16x16.png" mode="aspectFill" />
          </div>
        </div>
        <!-- 中间内容 -->
        <div class="card-center">
          <div class="arrow-content"></div>
          <ContentMain :item="item || {}" />
        </div>
        <!-- 右侧用户头像 -->
        <div class="card-right">
          <div class="card-image" v-if="item.isMe">
            <img :src="rightAvatar" mode="aspectFill" />
          </div>
        </div>
      </div>

      <!-- 加载动画 -->
      <div class="content-loading" v-show="loading">加载中···</div>
    </div>

    <div class="chat-tools">
      <div class="tools-textarea">
        <div class="tools-left"></div>
        <div class="tools-center">
          <ZTextarea v-model="textareaValue" @focus="handleFocus" />
        </div>
        <div class="tools-right">
          <!-- 加号 -->
          <div class="right-icon el-icon-circle-plus-outline" @click="setOpts" v-if="!textareaValue"></div>
          <!-- 发送 -->
          <div class="right-send" v-else @click="textareaChange(textareaValue)">
            发 送
          </div>
        </div>
      </div>
      <div class="tools-opts" v-show="isOpts">
        <div class="opts-fontsize">
          <div class="fontsize-label">字体:</div>
          <div class="fontsize-options">
            <div class="options-item" v-for="(item, index) in fontSizes" :key="index" :class="{
              [item.value]: true,
              selected: index === fontSizeCurrent,
            }" @click="fontSizeCurrent = index">
              {{ item.label || "" }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getDevicesKeyworksApi } from "@/api/industry/hardware.js";
import axios from 'axios';

export default {
  props: {
    focus: {
      type: Boolean,
      default: false,
    },
    tipsContent: {
      type: Array,
      default: () => [],
    }
  },
  components: {
    ZTextarea: () => import("./ZTextarea"),
    ContentMain: () => import("./contentMain"),
  },
  watch: {
    focus(val) {
      this.isFocus = val;
    },
    tipsContent: {
      handler(val) {
        if (!(val || []).length) return;
        this.chatList = val.map((item, index) => {
          return {
            id: Math.ceil(new Date().getTime() * 1000000000),
            type: "text",
            isMe: false,
            content: item,
          }
        })
      },
      immediate: true
    }
  },
  data() {
    return {
      isFocus: this.focus,
      isOpts: false,
      fontSizeCurrent: 1,
      /** chatList Array
       * @param {Number|String}  	type       		内容类型： text，video
       * @param {Boolean}  		    isMe 		发送人： false客服，true客户
       * @param {String}  		    content 		  发送内容
       * */
      chatList: [
        {
          id: 1,
          type: "text",
          isMe: false,
          content:
            "你好，欢迎来到小草AI，在下方对话框中输入想了解的内容，马上为您服务！",
        },
        {
          id: 2,
          type: "text",
          isMe: false,
          content: "嗨～我是小草，请描述下您遇到的问题？",
        },
      ],
      dataList: [],
      loading: false,
      textareaValue: "", // 文本框输入内容
      keyboardheight: 0, // 键盘高度
      fontSizes: [
        {
          label: "较小",
          value: "font-size-small",
        },
        {
          label: "默认",
          value: "font-size",
        },
        {
          label: "中等",
          value: "font-size-medium",
        },
        {
          label: "较大",
          value: "font-size-large",
        },
      ],
      rightAvatar: require('@/assets/avatar.png'),
    };
  },
  computed: {
    getFontSize() {
      return (this.fontSizes[this.fontSizeCurrent] || {}).value || "";
    },
  },
  created() {
    this.defaultList();
  },
  methods: {
    // 获取首次进入提示内容
    defaultList() {
      this.chatList.map((item) => {
        this.sendContent(item.content, item.type, false);
      });
    },
    setOpts() {
      this.isOpts = !this.isOpts;
      if (!this.isOpts) {
        this.isFocus = false;
        setTimeout(() => {
          this.isFocus = this.keyboardheight ? true : false;
        }, 0);
      } else {
        // this.keyboardheight = 0;
      }
    },
    focusHandle(e) {
      this.keyboardheight = String(e.detail.height);
    },
    setFontSize(index) {
      this.fontSizeCurrent = index;
    },
    scrollToBottom() {
      this.$nextTick(() => {
        var container = this.$el.querySelector(".chat-content");
        container.scrollTop = Math.random() * 100000;
      });
    },
    /**
     * @param {String}    content     发送的内容
     * @param {Number}    type        内容类型：text文本，list列表
     * @param {Boolean}   isMe  发送人： true用户发送，false系统返回
     * */
    sendContent(content = "", type = "text", isMe = false) {
      if (!content) return;
      this.dataList.push({
        content,
        type,
        isMe,
      });
      this.loading = false;
      this.scrollToBottom();
    },
    textareaChange(val) {
      // this.textareaValue = val;
      if (!val) return;
      // this.releaseBtn();
      // 发送客户输入内容
      this.sendContent(val, "text", true);
      // 获取服务端数据响应
      this.getServerInfo(val);
      this.textareaValue = null;
    },
    // 获取问答响应数据
    getServerInfo(text) {
      this.loading = true;
      // getDevicesKeyworksApi({
      //   text,
      // })
      //   .then((res) => {
      //     this.loading = false;
      //     let info = res.data || {};
      //     // 发送服务端响应数据
      //     this.sendContent(info.data, info.type, false);
      //   })
      //   .catch((err) => {
      //     this.loading = false;
      //   });
      text = text.trim()
      axios.get('/api/qs?prompt=' + encodeURIComponent(text))
        .then(res => {
          console.log(res, 'resresresres');
          this.loading = false;
          let info = res.data || {};
          this.sendContent(info, 'text', false);
        })
        .catch(error => {
          this.loading = false;
        });
    },
    handleFocus() {
      this.isOpts = false;
    },
  },
};
</script>

<style lang="scss">
@import "./index.scss";
@import "./fontSize.scss";
</style>
